<template>
  <div class="tabs-wrap" :style="tabsStyle">
    <div class="tabs-box">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane
          v-for="item in tabsMenuList"
          :key="item.path"
          :name="item.path"
          :closable="item.path !== '/welcome'"
        >
          <template #label>
            {{ item.meta?.title }}
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dropdown class="tabs-dropdown">
      <div class="dropdown-trigger">
        <el-icon size="24">
          <arrow-down />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="Refresh">刷新</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from "vue";
import config from "@/layouts/config";

/* data */
const activeTab = ref("/welcome");
const tabsMenuList = reactive([
  {
    path: "/welcome",
    meta: {
      title: "欢迎页",
    },
  },
]);
/* 动态样式 */
const tabsStyle = computed(() => ({
  "--tab-header": config.tabsHeight,
  height: config.tabsHeight,
}));
</script>
<style lang="scss" scoped>
.tabs-wrap {
  display: flex;
  border-bottom: 1px solid $border-color;
  .tabs-box {
    border-right: 1px solid $border-color;
    flex: 1 0;
    padding: 0 20px;
    height: 100%;
    :deep(.el-tabs) {
      --el-tabs-header-height: var(--tab-header);
      .el-tabs__header {
        margin-bottom: 0px;
        border-bottom-width: 0px;
        .el-tabs__nav {
          border: none;
        }
      }
    }
  }
  .tabs-dropdown {
    .dropdown-trigger {
      width: var(--tab-header);
      height: var(--tab-header);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
